                                                                                                                                                                                                    <template>
    <div class="app-container" v-if="canList">
        <div class="filter-container">
                            <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item"
                          placeholder="文章名"
                          v-model="listQuery.title">
                </el-input>
                            <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item"
                          placeholder="用户名"
                          v-model="listQuery.userName">
                </el-input>
                                        <el-select @change='handleFilter'  clearable class="filter-item" style="width: 160px" v-model="listQuery.isActive"
                           placeholder="状态">
                                        <el-option v-for="(item,index) in  isActiveOptions" :key="item" :label="item" :value="index">
                    </el-option>
                </el-select>
                <!--<el-date-picker
                        v-model="listQuery.shareDate"
                        type="datetimerange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                </el-date-picker>-->

            <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">查找
            </el-button>
            <!--<el-button class="filter-item" style="margin-left: 10px;" @click="handleCreate" type="primary"
                  v-if="canSave"     icon="el-icon-edit">添加
            </el-button>-->
            <el-button class="filter-item" type="primary" :loading="downloadLoading" v-waves icon="el-icon-download"
                       @click="handleDownload">导出
            </el-button>
        </div>

        <el-table :key='tableKey' :data="list" v-loading="listLoading" border fit highlight-current-row
                  style="width: 100%;min-height:1000px;">
            <el-table-column align="center" width="100" label="序号">
                <template slot-scope="scope">
                    <span>{{scope.row.id}}</span>
                </template>
            </el-table-column>
                            <el-table-column align="center" label="文章名">
                    <template slot-scope="scope">
                        <span>{{scope.row.title}}</span>
                    </template>
                </el-table-column>
                            <el-table-column align="center" label="用户名">
                    <template slot-scope="scope">
                        <span>{{scope.row.userName}}</span>
                    </template>
                </el-table-column>
                                        <el-table-column align="center" label="状态">
                    <!--<template slot-scope="scope">
                        <span>{{scope.row.isActive}}</span>
                    </template>-->
                                          <template slot-scope="scope">
                                            <el-tag :type="scope.row.status | statusFilter">{{scope.row.status === 0 ? '未激活' : '已激活'}}</el-tag>
                                          </template>
                </el-table-column>
                                        <el-table-column align="center" label="分享时间">
                    <template slot-scope="scope">
                        <span>{{scope.row.shareDate}}</span>
                    </template>

                </el-table-column>

            <el-table-column align="center" label="操作" width="360" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <!--<el-button type="primary"  v-if="canUpdate"  size="mini" @click="handleUpdate(scope.row)">编辑</el-button>-->
                    <el-button  v-if="canSave"  size="mini" type="danger"
                               @click="handleDelete(scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>

        </el-table>

        <div class="pagination-container">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                           :current-page="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit"
                           layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>

        <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
            <el-form :rules="rules" ref="dataForm" :model="temp" label-position="left" label-width="70px"
                     style='width: 400px; margin-left:50px;'>
                                    <el-form-item label="文章ID" prop="name">
                        <el-input v-model="temp.articleId"></el-input>
                    </el-form-item>
                                    <el-form-item label="用户ID" prop="name">
                        <el-input v-model="temp.userId"></el-input>
                    </el-form-item>
                                                    <el-form-item label="状态" prop="status">
                        <el-select class="filter-item" v-model="temp.isActive" placeholder="状态">
                            <el-option v-for="(item,index) in  isActiveOptions" :key="item" :label="item"
                                       :value="index">
                            </el-option>
                        </el-select>
                    </el-form-item>
                                                    <el-form-item label="分享时间" prop="date">
                        <el-date-picker v-model="temp.shareDate" type="datetime"
                                        value-format="yyyy-MM-dd HH:mm:ss" placeholder="分享时间">
                        </el-date-picker>
                    </el-form-item>

                            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="closeDialogForm">取消</el-button>
                <el-button v-if="dialogStatus=='create'" type="primary" @click="createData">确认</el-button>
                <el-button v-else type="primary" @click="updateData">确认</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<style type="stylus">
    .filter-container {
        padding-bottom: 20px;
    }
</style>

<script>
    import { findShareRecord, save, update, remove } from '@/api/share'
    import waves from '@/directive/waves' // 水波纹指令
    import { parseTime } from '@/utils'

    import { mapGetters } from 'vuex'
    import { hasAuth } from '@/utils/auth'
    export default {
      name: 'test',
      directives: {
        waves
      },
      data() {
        return {
          tableKey: 0,
          list: null,
          total: null,
          listLoading: true,
          listQuery: {
            page: 1,
            limit: 20,
            sidx: 'id',
            order: 'desc',
            // articleId: null,
            // userId: null,
            // shareDate: null,
            title: null,
            userName: null,
            isActive: null
          },
          isActiveOptions: ['未激活', '已激活'],
          temp:
            {
              id: null, articleId: null, userId: null, shareDate: null, isActive: null },
          dialogFormVisible: false,
          dialogStatus:
            '',
          textMap:
            {
              update: '修改',
              create:
                '新增'
            },
          rules:
            {
              articleId: [
                {
                  required: false, message:
                                '必填字段', trigger:
                                'change'
                }
              ],
              userId: [
                {
                  required: false, message:
                                '必填字段', trigger:
                                'change'
                }
              ],
              shareDate: [
                {
                  required: false, message:
                                '必填字段', trigger:
                                'change'
                }
              ],
              isActive: [
                {
                  required: false, message:
                                '必填字段', trigger:
                                'blur'
                }
              ]
            },
          downloadLoading: false,
          qData:
            {
              token: '',
              key:
                ''
            }
        }
      },
      created() {
        this.getList()
      },
      computed: {
        ...mapGetters([
          'perms'
        ]),
        canSave() {
          return hasAuth(this.perms, 'share:save')
        },
        canDelete() {
          return hasAuth(this.perms, 'share:delete')
        },
        canUpdate() {
          return hasAuth(this.perms, 'share:update')
        },
        canList() {
          return hasAuth(this.perms, 'share:list')
        }
      },
      methods: {
        getList() {
          this.listLoading = true
          // 如果存在时间
          // if (this.listQuery.shareDate) {
          //   this.listQuery['shareDateStart'] = parseTime(this.listQuery.shareDate[0])
          //   this.listQuery['shareDateEnd'] = parseTime(this.listQuery.shareDate[1])
          // } else {
          //   this.listQuery['shareDateStart'] = null
          //   this.listQuery['shareDateEnd'] = null
          // }
          findShareRecord(this.listQuery).then(response => {
            this.list = response.data.list
            this.total = response.data.total
            this.listLoading = false
          })
        },
        handleFilter() {
          this.listQuery.page = 1
          this.getList()
        },
        handleSizeChange(val) {
          this.listQuery.limit = val
          this.getList()
        },
        handleCurrentChange(val) {
          this.listQuery.page = val
          this.getList()
        },
        handleModifyStatus(row, status) {
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          row.status = status
        },
        beforeFormShow(row) {
          this.resetTemp(row) // 更新数据
          // 存在图片
        },
        afterFormShow(row) {

        },
        beforeFormCommit() {
        },
        resetTemp(row) {
          this.temp = {}
          if (row) {
            this.temp = Object.assign({}, row) // copy obj
          }
        },
        handleCreate() {
          this.beforeFormShow()
          this.resetTemp()
          this.dialogStatus = 'create'
          this.dialogFormVisible = true
          this.$nextTick(() => {
            this.afterFormShow()
            this.$refs['dataForm'].clearValidate()
          })
        },
        handleDelete(row) {
          this.beforeFormShow(row)
          this.temp = Object.assign({}, row) // copy obj
          this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            // this.$message({
            //   type: 'success',
            //   message: '删除成功!'
            // })
            this.deleteData()
          })
            .catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              })
            })
        },
        createData() {
          this.$refs['dataForm'].validate((valid) => {
            if (valid) {
              this.beforeFormCommit()
              save(this.temp).then(res => {
                this.temp = res.data
                this.list.unshift(this.temp)
                this.closeDialogForm()
                this.$notify({
                  title: '成功',
                  message: '创建成功',
                  type: 'success',
                  duration: 2000
                })
              })
            }
          }
          )
        },
        deleteData() {
          const ids = [this.temp.id]
          remove(ids).then(res => {
            // 从当前队列中移除
            for (const v of this.list
            ) {
              if (v.id === this.temp.id) {
                const index = this.list.indexOf(v)
                this.list.splice(index, 1)
                break
              }
            }
            this.$notify({
              title: '成功',
              message: '删除成功',
              type: 'success',
              duration: 2000
            })
          })
        },
        handleUpdate(row) {
          this.beforeFormShow(row)
          this.dialogStatus = 'update'
          this.dialogFormVisible = true
          this.$nextTick(() => {
            this.$refs['dataForm'].clearValidate()
          })
        },
        updateData() {
          this.$refs['dataForm'].validate((valid) => {
            if (valid) {
              this.beforeFormCommit()
              update(this.temp).then(() => {
                for (const v of this.list
                ) {
                  if (v.id === this.temp.id) {
                    const index = this.list.indexOf(v)
                    this.list.splice(index, 1, this.temp)
                    break
                  }
                }
                this.closeDialogForm()
                this.$notify({
                  title: '成功',
                  message: '更新成功',
                  type: 'success',
                  duration: 2000
                })
              })
            }
          }
          )
        },
        closeDialogForm() {
          this.dialogFormVisible = false
        },
        handleDownload() {
          this.downloadLoading = true
                import('@/vendor/Export2Excel').then(excel => {
                  const tHeader = [
                    '序号',
                    '文章ID',
                    '用户ID',
                    '状态',
                    '分享时间'
                  ]
                  const filterVal = ['id',
                    'articleId',
                    'userId',
                    'isActive',
                    'shareDate'
                  ]
                  const data = this.formatJson(filterVal, this.list)
                  excel.export_json_to_excel({
                    header: tHeader,
                    data,
                    filename: 'table-list'
                  })
                  this.downloadLoading = false
                })
        },
        formatJson(filterVal, jsonData) {
          return jsonData.map(v => filterVal.map(j => {
            return v[j]
          }
          ))
        }
      }
    }
</script>
